<div class="Smallbanner">
    <div class="SmallbannerCon">
        <ul class="SamllimgList">
            <li>
                <ul class="ListCon clearfix" ng-repeat="item in range(smallAdverNum)">
                    <li ng-repeat="items in data|dataFormat:item track by $index"><a href="{{items.url}}"><img src="{{items.logo}}" /></a></li>
                </ul>
                <ul class="ListCon clearfix">
                    <li ng-repeat="items in data|dataFormat:0 track by $index"><a href="{{items.url}}"><img src="{{items.logo}}" /></a></li>
                </ul>
            </li>
        </ul>
        <!--<span ng-click="dirction('pre')" class="pre-nex prev">&lt;</span>-->
        <!--<span ng-click="dirction('next')" class="pre-nex next">&gt;</span>-->
        <div class="dot">
            <span ng-if="dotFlag" ng-click="hoverDot(item)" ng-repeat="item in range(smallAdverNum)" ng-class="{'active':$first}"></span>
        </div>
    </div>
</div>
<style>
    .dot{
        position: absolute;
        bottom:-20px;
        right:0px;
    }
    .dot .active{
        width:14px;
        background: black;
    }
    .dot span{
        display: inline-block;
        width:8px;
        height:8px;
        background:#dedede;
        margin-left:10px;
        cursor:pointer;
    }
    .clearfix:after {
        visibility: hidden;
        display: block;
        font-size: 0;
        content: " ";
        clear: both;
        height: 0;
    }
    /* 具体样式 */
    .Smallbanner {
        position: relative;
        width:751px;
        height: 91px;
    }
    .Smallbanner .SmallbannerCon {
        position: absolute;
        top: 0;
        left: 50%;
        width: 750px;
        height: 91px;
        margin-left: -378px;
    }
    .SmallbannerCon .SamllimgList {
        position: absolute;
        top: 0;
        left: 0;
        height: 91px;
        width: 751px;
        overflow: hidden;
    }

    .SmallbannerCon ul li {
        float: left;
        width: 751px;
        height: 91px;
    }
    .SmallbannerCon .SamllimgList li {
        width: 751px;
        height:91px;
    }
    .SmallbannerCon .SamllimgList li a {
        position: relative;
        display: block;
        height: 100%;
    }
    .SmallbannerCon .SamllimgList li img {
        width: 100%;
        height: 100%;
    }
    .SmallbannerCon .ListCon{
        height: 91px;
        width:100%;
        overflow: hidden;
    }
    .SmallbannerCon ul li ul.ListCon li {
	    float: left;
	    width: 169px;
	    height: 91px;
	    margin-left: 25px;
    }
    .SmallbannerCon ul li ul.ListCon li:nth-child(1){
    	margin-left: 0px;
    }
    .SmallbannerCon .pre-nex {
        /*display: none*/
        position: absolute;
        top: 50%;
        width: 20px;
        height: 30px;
        margin-top: -15px;
        font: bold 20px/30px Simsun;
        color: #ccc;
        text-align: center;
        border:none;
        background: rgba(0,0,0,.30);
        filter:progid:DXImageTransform.Microsoft.Gradient(startColorStr=#4c000000, endColorStr=#4c000000);
        cursor: pointer;
        z-index: 3;
    }
    .SmallbannerCon .pre-nex:hover{
        background: rgba(0,0,0,.50);
    }
    .SmallbannerCon .pre-nex.show { display: inline-block; }
    .SmallbannerCon .prev { left:8px; }
    .SmallbannerCon .next { right:5px; }
    .SmallbannerCon .SmallbtnList {
        position: absolute;
        right:-56px;
        bottom: 0px;
        width: 130px;
        height: 12px;
        text-align:center;
        z-index: 2;
        _overflow: hidden;

    }
    .SmallbannerCon .SmallbtnList li {
        width:12px;
        height:12px;
        float: left;
        margin: 0 5px;
    }
    .SmallbannerCon .SmallbtnList li span {
        display: inline-block;
        width: 8px;
        height: 8px;
        margin: 0 5px;
        background-color:#dddddd;
        cursor: pointer;
    }
    .SmallbannerCon .SmallbtnList li.cur span {
        position: relative;
        top:0px;
        width:14px;
        left:-3px;
        height:8px;
        background:#000;
    }
</style>